<!--回答测试问题的页面-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试题目</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <div class="content">
            <div class="row">
                <div class="btn-group">
                    <button class="btn btn-default" type="button" onclick="location.reload()">刷新</button>
                </div>
            </div>

            <div style="width: 100%;height:auto;display: inline-block;border: 1px solid white;position: relative;margin-top:10px;">
                <div style="width: 100%;">
                    <div style="width: 80%;margin: 0px auto">
                        <div style="width: 100%;height:100px;border: 1px solid #CCC;border-bottom:none;background:#FFF;">
                            <div class="middle-top" style="width: 100%;height: 50px;border-bottom: 1px solid #CCC;background:#2D3339; position:relative;">
                                <div class="middle-top-left pull-left"
                                     style="height: 100%;padding-left: 20px;;background:#232C31;color:#FFF;">
                                    <div class="text-center pull-left progress-left"
                                         style="border: 1px solid #A2C69A;background:#FFF;border-radius:10px;line-height:20px;height:20px;margin:15px 0px 15px 0px;font-size: 11px;position:relative;">
                                        <div class="progress pull-left"
                                             style="background: #609E53;width: 0px;height:18px;position:absolute;left: 0px;"></div>
                                        <div class="pro-text" style="left: 0px;color: #609E53;position:absolute;top:0px;width:100%;"> 已完成<span class="progres"></span></div>
                                    </div>
                                    <div class="pull-left" style=" width:135px;line-height:20px;height:20px;margin:15px;font-size:15px;">
                                        <!--已做答的数量和考题总数-->
                                        当前第<span class="questioned"></span>题/共<span class="question_sum"></span>题 </div>
                                </div>
                                <div class="middle-top-right text-center pull-left"
                                     style="width:160px; height: 100%;border-left: 1px solid red;position: absolute;right: 0px;">
                                    <div class="stop pull-left" style="width: 50px; height: 100%;padding: 10px;"> <a href="javascript:void(0);" class="text-center" style="color: #FE6547;">
                                        <div class="time-stop glyphicon glyphicon-pause" title="暂停"
                                             style="width:30px;height: 30px;line-height:30px; border-radius:15px;border: 1px solid #FE6547;"></div>
                                        <div class="time-start glyphicon glyphicon-play" title="开始"
                                             style="width:30px;height: 30px;line-height:30px;border-radius:15px;border: 1px solid #FE6547;display:none;"></div>
                                    </a> </div>
                                    <div class="pull-left"  style="width: 100px; height: 100%;padding: 10px 0px 10px 0px;">
                                        <div class="time" style="width:100px;height: 30px;line-height:30px; border-radius:15px;font-size:20px;color:#FFF;"> </div>
                                    </div>
                                </div>
                            </div>
                            <div style="width: 100%;height: 50px;font-size:15px;color: #000;line-height: 50px;padding-left: 20px;">
                                <div style="color:#FFF;background: red;width: 22px;height: 22px;border-radius:11px;line-height:22px;font-size:13px; text-align: center;"
                                     class="glyphicon glyphicon-map-marker"></div>
                                [单选题] </div>
                        </div>
                        <div style="width: 100%;height:auto;display: inline-block;border: 1px solid #CCC;border-bottom:1px dashed #CCC;background:#FFF;">
                            <div style="width: 100%;height: 90%;padding:20px 20px 0px 20px;">
                                <!--试题区域-->
                                <ul class="list-unstyled question" id="" name="">
                                    <li class="question_title"></li>
                                </ul>
                                <!--考题的操作区域-->
                                <div class="operation" style="margin-top: 20px;">
                                    <div class="text-right" style="margin-right: 20px;">
                                        <div class="form-group" style="color: #FFF;">
                                            <button class="btn btn-success" id="submitQuestions">提交试卷</button>
                                            <button class="btn btn-info" id="nextQuestion">下一题</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="width: 100%;height:auto;display: inline-block;border: 1px solid #CCC;border-top:none;background:#FFF;">
                            <div style="width: 100%;padding:20px;">
                                <div class="panel-default">
                                    <div class="panel-heading" id="closeCard" style="color: #DCE4EC;font-size: 15px;display: none;background: none;">
                                        <span>收起答题卡</span> <span class="glyphicon glyphicon-chevron-up"></span> </div>
                                    <div class="panel-heading" id="openCard" style="font-size: 15px;background: none;"> <span>展开答题卡</span> <span class="glyphicon glyphicon-chevron-down"></span> </div>
                                    <div id="answerCard" style="display: none;">
                                        <div class="panel-body form-horizontal" style="padding: 0px;">
                                            <ul class="list-unstyled">
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 100%;height: auto;display: inline-block;border: 1px solid white;">
                <div class="text-center" style="width: 100%;"> 底部 </div>
            </div>
        </div>
    </div>
    <div class="col-md-1"></div>
</div>
</body>

<script>
    //获取testerid
    let uid = [[${uid}]];
    console.log(uid);
    let questions=[];
    $.ajax({
                url:"question/selectByPage",
            contentType:"application/json",
            data:{page:1,limit:30},
            dataType:"json",//相应的数据类型：服务器给我的
            type:"get",
            async:false,//这样才能保证改变外部变量questions
            success:function (data) {
                //成功的响应函数  ：dataInfo名字随便写，代表的是服务器相应的内容
                if(data.code==0){
                    //处理数据，使数据符合插件
                    for (let i = 0; i < data.data.length; i++) {
                        questions[i] = JSON.stringify(data.data[i]);
                    }
                }else{
                    layer.msg(data.msg,{icon: 5});
                }
            }
        }
    )
    var HH = 0;//时
    var mm = 0;//分
    var ss = 0;//秒
    var timeState = true;//时间状态 默认为true 开启时间
    var itemList=["A","B","C","D"]
    var activeQuestion=0; //当前操作的考题编号
    var questionIdWeb = 0;//后台questionId
    var questioned = 0; //
    var checkQues = []; //已做答的题的集合
    /*实现计时器*/
    var time = setInterval(function () {
        if (timeState) {
            if (HH == 24) HH = 0;
            str = "";
            if (++ss == 60) {
                if (++mm == 60) { HH++; mm = 0; }
                ss = 0;
            }
            str += HH < 10 ? "0" + HH : HH;
            str += ":";
            str += mm < 10 ? "0" + mm : mm;
            str += ":";
            str += ss < 10 ? "0" + ss : ss;
            $(".time").text(str);
        } else {
            $(".time").text(str);
        }
    }, 1000);
    //展示考卷信息
    function showQuestion(id){
        $(".questioned").text(id+1);
        questioned = (id+1)/questions.length
        if(activeQuestion!=undefined){
            $("#ques"+activeQuestion).removeClass("question_id").addClass("active_question_id");
        }
        activeQuestion = id;
        $(".question").find(".question_info").remove();
        var question = JSON.parse(questions[id])
        questionIdWeb = question.id;
        $(".question_title").html("<strong>第 "+(id+1)+" 题 、</strong>"+question.question);
        var item ="<li class='question_info' onclick='clickTrim(this)' id='item"
            +0+"'><input type='radio' name='item' value='"+itemList[0]+"'>&nbsp;"+itemList[0]+"."+question.optionA+"</li>";
        $(".question").append(item);
        item = "<li class='question_info' onclick='clickTrim(this)' id='item"
            +1+"'><input type='radio' name='item' value='"+itemList[1]+"'>&nbsp;"+itemList[1]+"."+question.optionB+"</li>";
        $(".question").append(item);
        item = "<li class='question_info' onclick='clickTrim(this)' id='item"
            +2+"'><input type='radio' name='item' value='"+itemList[2]+"'>&nbsp;"+itemList[2]+"."+question.optionC+"</li>";
        $(".question").append(item);
        item = "<li class='question_info' onclick='clickTrim(this)' id='item"
            +3+"'><input type='radio' name='item' value='"+itemList[3]+"'>&nbsp;"+itemList[3]+"."+question.optionD+"</li>";
        $(".question").append(item);

/*        var items = question.questionItems.split(";");
        var item="";
        for(var i=0;i<4;i++){
            item ="<li class='question_info' onclick='clickTrim(this)' id='item"
                +i+"'><input type='radio' name='item' value='"+itemList[i]+"'>&nbsp;"+itemList[i]+"."+items[i]+"</li>";
            $(".question").append(item);
        }*/
        $(".question").attr("id","question"+id);
        $("#ques"+id).removeClass("active_question_id").addClass("question_id");
        for(var i=0;i<checkQues.length;i++){
            if(checkQues[i].id==id){
                $("#"+checkQues[i].item).find("input").prop("checked","checked");
                $("#"+checkQues[i].item).addClass("clickTrim");
                $("#ques"+activeQuestion).removeClass("question_id").addClass("clickQue");
            }
        }
        progress();
    }

    /*答题卡*/
    function answerCard(){
        $(".question_sum").text(questions.length);
        for(var i=0;i<questions.length;i++){
            var questionId ="<li id='ques"+i+"'onclick='saveQuestionState("+i+")' class='questionId'>"+(i+1)+"</li>";
            $("#answerCard ul").append(questionId);
        }
    }

    /*选中考题*/
    var Question;
    function clickTrim(source){
        var id = source.id;
        $("#"+id).find("input").prop("checked","checked");
        $("#"+id).addClass("clickTrim");
        $("#ques"+activeQuestion).removeClass("question_id").addClass("clickQue");
        var ques =0;
        for(var i=0;i<checkQues.length;i++){
            if( checkQues[i].id==activeQuestion&&checkQues[i].item!=id){
                ques = checkQues[i].id;
                checkQues[i].item = id;//获取当前考题的选项ID
                checkQues[i].answer =$("#"+id).find("input[name=item]:checked").val();//获取当前考题的选项值
            }
        }
        if(checkQues.length==0||Question!=activeQuestion&&activeQuestion!=ques){
            var check ={};
            check.id=activeQuestion;//获取当前考题的编号
            check.questionId = questionIdWeb;//添加元素，传后台
            check.item = id;//获取当前考题的选项ID
            check.answer =$("#"+id).find("input[name=item]:checked").val();//获取当前考题的选项值
            checkQues.push(check);
        }
        $(".question_info").each(function(){
            var otherId =$(this).attr("id");
            if(otherId!=id){
                $("#"+otherId).find("input").prop("checked",false);
                $("#"+otherId).removeClass("clickTrim");
            }
        })
        Question = activeQuestion;
    }

    /*设置进度条*/
    function progress(){
        var prog = ($(".active_question_id").length+1)/questions.length;
        var pro = $(".progress").parent().width() * prog;
        $(".progres").text((prog*100).toString().substr(0,5)+"%")
        $(".progress").animate({
            width: pro,
            opacity: 0.5
        }, 1000);
    }

    /*保存考题状态 已做答的状态*/
    function saveQuestionState(clickId){
        showQuestion(clickId)
    }

    $(function(){
        $(".middle-top-left").width($(".middle-top").width()-$(".middle-top-right").width())
        $(".progress-left").width($(".middle-top-left").width()-200);

        progress();
        answerCard();
        showQuestion(0);
        /*alert(QuestionJosn.length);*/
        /*实现进度条信息加载的动画*/
        var str = '';
        /*开启或者停止时间*/
        $(".time-stop").click(function () {
            timeState = false;
            $(this).hide();
            $(".time-start").show();
        });
        $(".time-start").click(function () {
            timeState = true;
            $(this).hide();
            $(".time-stop").show();
        });

        /*收藏按钮的切换*/
        $("#unHeart").click(function(){
            $(this).hide();
            $("#heart").show();
        })
        $("#heart").click(function(){
            $(this).hide();
            $("#unHeart").show();
        })

        /*答题卡的切换*/
        $("#openCard").click(function(){
            $("#closeCard").show();
            $("#answerCard").slideDown();
            $(this).hide();
        })
        $("#closeCard").click(function(){
            $("#openCard").show();
            $("#answerCard").slideUp();
            $(this).hide();
        })

        //提交试卷
        $("#submitQuestions").click(function(){
            /*alert(JSON.stringify(checkQues));*/
            //检查题目是否做完，做完才能提交
            checkQuestionNull();


        })
        function checkQuestionNull() {
            //长度是否和问题长度一样，一样及视为做完
            console.log(checkQues)
            if (checkQues.length==questions.length) {
                var postData = [];
                //向后台提交
                for (let i = 0; i < checkQues.length; i++) {
                    var jsonData = {};
                    jsonData.testerId = uid;
                    jsonData.questionId = checkQues[i].questionId;
                    jsonData.answer = checkQues[i].answer;
                    postData[i] = jsonData;
                }
                //处理数据
                $.ajax({
                    url: "result/insertBath",
                    data:JSON.stringify(postData),
                    dataType: "JSON",
                    contentType: "application/json",
                    method:"POST",
                    success(data){
                        if (data.code===0){
                            window.location.href = "toShowResult?uid="+uid;
                        }else {
                            window.alert("提交失败！");
                        }
                    }
                })
            }else {
                alert("题目未完成，请展开答题卡查看未完成题目！");
            }
        }
        //进入下一题
        $("#nextQuestion").click(function(){
            if((activeQuestion+1)!=questions.length) showQuestion(activeQuestion+1);
            showQuestion(activeQuestion)
        })
    })
</script>
</html>